import React, { useState } from 'react'
import { NavBar, Space, List, Radio,Button } from 'antd-mobile'
import { SearchOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import '../../css/yjh/Apps.css'
import { useLocation } from 'react-router-dom'
export default function Paymentpage() {


   const location = useLocation()
    const { totalprice } = location.state

  const [selectedPay, setSelectedPay] = useState(null);


  const Pay = [
    { "id": 1, "name": '微信支付','imgs':'https://ts1.tc.mm.bing.net/th/id/R-C.692de9abd94bc6a408ce5591e04403b1?rik=Pdt3a4ecCmrvQQ&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20191130%2f29554138_095901936699_2.jpg&ehk=deyCCJtpHBww4tY9QO9z8ZGsTCZWN%2fdTHjfZ3SYvktU%3d&risl=&pid=ImgRaw&r=0' },
    { "id": 2, "name": '支付宝支付' ,'imgs':'https://ts1.tc.mm.bing.net/th/id/R-C.9710db5ab36d67b94c491fe9fb1223ab?rik=UHxTNvtYQJKc3Q&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2024%2f01-20%2f149784%2fwater_149784_698_698_.png&ehk=mh8TMdPyH1Cav3vFhYq39DeAkm9%2bzLDAr1usichN21I%3d&risl=&pid=ImgRaw&r=0'},
    { "id": 3, "name": 'Apple Pay' ,'imgs':'https://tse4-mm.cn.bing.net/th/id/OIP-C.tGiSldymY99izmoiq7bx4QHaHa?w=192&h=192&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
    { "id": 4, "name": '钱包支付','imgs':'https://tse1-mm.cn.bing.net/th/id/OIP-C.wQR4Xqg5KgjhlCwhCugT_AHaHa?w=183&h=183&c=7&r=0&o=5&dpr=1.5&pid=1.7' },
    { "id": 5, "name": '银联支付(9**9)','imgs':'https://tse4-mm.cn.bing.net/th/id/OIP-C.b-ST5JjmulmY3KTowmWmNQHaHa?w=167&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7' },
  ]
  const handlePaySelect = (id) => {
    setSelectedPay(id);
  };


  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ '--gap': '16px' }}>
        <SearchOutline />
      </Space>
    </div>
  )

  const back = () => {
   navgiter('/address')
  }

  const navgiter = useNavigate()
  const gotoselect = () => {
    navgiter('/confirmpage',{state: {totalprice:totalprice,}})
  }
  const handleConfirm = () => {
    if (selectedPay) {
      const selectedPayData = Pay.find(item => item.id === selectedPay);
      if (selectedPayData) {
        localStorage.setItem('selectedPay', JSON.stringify({
          name: selectedPayData.name,
          price: selectedPayData.price
        }));
      }
      gotoselect()
    }

  }

  return (
    <div className='Payment'>
      <NavBar back='支付方式' onBack={back} right={right} />
      <List>
        {Pay.map((item) => (
          <List.Item
            key={item.id}
            prefix={
              <Radio
                checked={selectedPay === item.id}
                onChange={() => handlePaySelect(item.id)}
              />
            }
          >
            <p className='divs'>
              <img src={item.imgs} alt=''/>
              <h3>{item.name}</h3>
            </p>
          </List.Item>
        ))}
      </List>
      <Button onClick={handleConfirm}>下一步</Button>
    </div>
  )
}

